<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现接口的调用</title>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>头像</td>
            <td>职业</td>
            <td>创建时间</td>
            <td>修改时间</td>
            <td>id</td>
            <td>介绍</td>
            <td>是否被删除</td>
            <td>等级</td>
            <td>名字</td>
            <td>排序</td>
        </tr>
        <tr v-for="item in memberList">
            <td>{{item.avatar}}</td>
            <td>{{item.career}}</td>
            <td>{{item.gmtCreate}}</td>
            <td>{{item.gmtModified}}</td>
            <td>{{item.id}}</td>
            <td>{{item.intro}}</td>
            <td>{{item.isDeleted}}</td>
            <td>{{item.level}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sort}}</td>
            </td>
        </tr>
    </table>
</div>

</body>

<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            memberList: []//数组
        },
        created() {
            this.getList()
        },

        methods: {

            getList(id) {
                //vm = this
                axios.get('http://localhost:8080/eduTeacher/get/teachers')
                    .then(response => {
                        console.log(response)
                        this.memberList = response.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    })
</script>
</html>